<template>
 <div style="background-color: #F8F9F9">

   <header>
     <ImageTop></ImageTop>
   </header>

    <!--人数座位选择信息-->
   <div class="container-fluid mt-3" style="background-color: #F8F9F9">
     <div class="row-fluid m-0 p-0">

       <div class="card  m-0 p-0">
         <div class="card-body " id="TableNumber">

           <div class="col-6 d-inline" style="text-align: left">
           就餐桌号：一楼：22大厅
           </div>
           <div class="col-6 d-inline" align="right">
            就餐人数：8人
           </div>

         </div>
       </div>
     </div>
   </div>
   <!--订单详情-->
    <div class="container-fluid mt-3" style="background-color: #F8F9F9" >
      <div class="card">
        <div class="card-body"id="order">
          <div>

            <table border="0" cellpadding="0" cellspacing="0">
              <!--头部店名-->
              <thead style="border-bottom: 1px solid #ccc">
              <tr align="left" class="mb-2">
                <th  colspan="3"><span style="line-height: 2.5" >周麻婆（福州闽侯店）</span>
               </th>
              </tr>
              </thead>
              &nbsp;
              <!--订单信息-->
              <tbody>
              <tr>
                <td rowspan="3"><img src="static/img/logo.png" width="60px" height="64px"></td>
                <td style="width: 100%;font-size: 15px" align="left">&nbsp;<strong>喷射战士套餐</strong></td>
                <td rowspan="3" >￥<strong style="font-size: 18px">89.00</strong></td>
              </tr>
              <tr>
                <td align="left">&nbsp;<small style="color: #989898">超大份/加香菜</small></td>
              </tr>
              <tr>
                <td align="left">&nbsp;<small style="color: #989898">x1</small></td>
              </tr>


              <tr>
                <td rowspan="3"><img src="static/img/logo.png" width="60px" height="64px"></td>
                <td style="width: 100%;font-size: 15px" align="left">&nbsp;<strong>喷射战士套餐</strong></td>
                <td rowspan="3">￥<strong style="font-size: 18px">89.00</strong></td>
              </tr>
              <tr>
                <td align="left">&nbsp;<small style="color: #989898">超大份</small></td>
              </tr>
              <tr>
                <td align="left">&nbsp;<small style="color: #989898">x1</small></td>
              </tr>

              </tbody>
              <br>
            </table>
            <div class="p-0 m-0">
              <table style="width: 100%;font-size: 15px" cellpadding="4">
                <thead style="border-bottom: 1px solid #ccc">
                <tr>
                  <td align="left">自助费 &nbsp;<small style="color: #989898">x2(人)</small></td>
                  <td align="right"><small>￥</small><strong style="font-size: 16px">6</strong></td>
                </tr>

                <tr>
                  <td align="left">优惠金额</td>
                  <td align="right"><small>￥</small><strong style="font-size: 16px">0</strong></td>
                </tr>
                <tr>
                  <td align="left">优惠券</td>
                  <td align="right"><small>暂无可用 ></small></td>
                </tr>
                <span>&emsp;</span>
                </thead>
                <tbody>
                <tr valign="bottom" align="right">
                  <td colspan="3"><span style="line-height: 2.5">小计 ￥<strong style="font-size: 18px">189.00</strong></span></td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>

 </div>
</template>

<script>
export default {
  name: "PlaceOrder",
  data(){
    return{
      id: 0
    }
  },
  methods:{

  },
  created() {
    this.id = this.$route.params.id;
    alert(this.id)
  }
}
</script>

<style scoped>
/*座位号信息字体样式 */
#TableNumber{
  font-size: 15px;
}
#order{
  padding-bottom:10px;padding-top: 10px;
  height: 90%;

}
</style>
